<script>
import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";
import SaveDialog from "./compoents/SaveDialog.vue";

export default {
  components: {KtIcon, SaveDialog},
  data() {
    return {
      bodyData: {
        content: [],
        number: 1,
        size: 5,
        totalElements: 1,
        totalPage: 1,
      },
      requestParamBind: {
        groupCode: "",
        title: "",
        code: ""
      },
      requestParam: {
        data: {
          and: []
        },
        pageNumber: 1,
        pageSize: 5,
      },
      /**
       * 分组数据
       */
      groupData: [],
      groupMap: {},
      contentLoading: true
    }
  },
  watch: {
    requestParamBind: {
      handler: function (val) {
        this.requestParam.data.and = [{
          field: "title",
          operatorCode: "vague",
          value: val.title
        }, {
          field: "code",
          operatorCode: "vague",
          value: val.code
        }, {
          field: "groupCode",
          operatorCode: "eq",
          value: val.groupCode
        }];
      },
      deep: true
    }
  },

  mounted() {
    this.getBodyData();
    this.getGroupData();
  },
  methods: {
    tabChange(val) {
      this.requestParamBind.groupCode = val;
      setTimeout(() => {
        this.getBodyData();
      }, 100);
    },
    getBodyData() {
      this.contentLoading = true;
      this.$kt.requestSecurity.send({
        uri: "/functional-template-web/admin/functionalTemplate/getBodyData",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData = res.data;
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        }
      });
    },
    changePageSize(val) {
      this.requestParam.pageSize = val;
      this.getBodyData();
    },
    changePageNumber(val) {
      this.requestParam.pageNumber = val;
      this.getBodyData();
    },
    /**
     * 获取分组数据
     */
    getGroupData() {
      this.$kt.requestSecurity.send({
        uri: "/functional-template-web/admin/functionalTemplateGroup/getList",
        stateSuccess: (res) => {
          this.groupData = [{
            code: "",
            name: "全部"
          }];
          let resData = res.data;
          for (let i = 0; i < resData.length; i++) {
            this.groupData.push(resData[i]);
          }
          this.groupData.forEach(item => {
            this.groupMap[item.code] = item;
          });

        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
    /**
     * 删除
     * @param item
     */
    toRemove(item) {
      this.$confirm("是否删除该数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$kt.requestSecurity.send({
          uri: "/functional-template-web/admin/functionalTemplate/remove",
          method: "post",
          data: {
            id: item.id
          },
          stateSuccess: (res) => {
            this.getBodyData();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
          }
        });
      });
    },
    /**
     * 打开保存对话框
     * @param item
     */
    openSave(item) {
      this.$refs.saveDialog.open(item);
    }
  }
}
</script>

<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="标题">
        <el-input v-model="requestParamBind.title"
                  @keyup.enter.native="getBodyData"
                  placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item label="编码">
        <el-input
            v-model="requestParamBind.code"
            @keyup.enter.native="getBodyData"
            placeholder="编码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getBodyData">查询</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div>

    <div>
      <div style="display: inline-block;width: 60px;vertical-align: top;">
        <!--    刷新按钮    -->
        <el-button
            @click="getBodyData()">
          <kt-icon icon="el-icon-refresh" size="small"></kt-icon>
        </el-button>
      </div>
      <div style="display: inline-block;width: calc(100% - 120px)">
        <el-tabs
            v-model="requestParamBind.groupCode"
            type="card"
            class="demo-tabs"
            @tab-change="tabChange"
        >
          <el-tab-pane
              v-for="item in groupData"
              :key="item.code"
              :label="item.name"
              :name="item.code"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="display: inline-block;width: 60px;vertical-align: top;">
        <!--    新增按钮    -->
        <el-button
            @click="openSave({})">
          <kt-icon icon="el-icon-plus" size="small"></kt-icon>
        </el-button>
      </div>

    </div>
  </div>
  <el-scrollbar
      v-loading="contentLoading"
      style="width: 100vw">
    <div class="box">
      <el-card v-for="item in bodyData.content" class="card">
        <template #header>
          <div>
            <el-tag>分组：{{ groupMap[item.groupCode]?.name }} #{{ item.groupCode }}</el-tag>
          </div>

          <div>
            <span>{{ item.title }}</span>
            <span
                style="font-weight: lighter;font-size: 12px;margin-left: 10px"
            >#{{ item.code }}</span>
          </div>
        </template>
        <div class="box-content">
          <textarea
              disabled
              class="box-content-text">{{item.content}}</textarea>
        </div>
        <div style="text-align: right">
          <!--     删除     -->
          <el-button
              type="danger"
              size="small"
              @click="toRemove(item)"
          >
            <kt-icon
                color="#fff"
                icon="el-icon-delete" size="small"></kt-icon>
          </el-button>
          <!-- 编辑 -->
          <el-button
              size="small"
              @click="openSave(item)">
            <kt-icon icon="el-icon-edit" size="small"></kt-icon>
          </el-button>
        </div>
      </el-card>

    </div>
  </el-scrollbar>
  <div style="text-align: center">
    <!-- 分页 -->
    <el-pagination
        style="margin-left: 50%;transform: translateX(-50%)"
        :page-size="requestParam.pageSize"
        :current-page="requestParam.pageNumber"
        :page-sizes="[5, 10, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="bodyData.totalElements"
        @size-change="changePageSize"
        @current-change="changePageNumber"/>
  </div>

  <!-- 用来新增或修改数据的对话框 -->
  <save-dialog ref="saveDialog"
               @submit="getBodyData"
  ></save-dialog>

</template>

<style scoped lang="scss">
.box {
  // 不换行
  white-space: nowrap;
}

.card {
  display: inline-block;
  width: 300px;
  margin: 10px;
}

.box-content {
  // 超出换行
  white-space: normal;

  .box-content-text {
    width: 100%;
    height: 200px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
  }
}
</style>